<template>
  <div class="shouye">
    <img src="../assets/banner.png" class="banner" alt="">
    <div class="content">
      <p class="contentTitle">
        算力产品
      </p>
      <div class="progressWrap">
        <div v-for="(item,index) in computerPowerList" :key="index">
          <p class="progressHeader">
						<span>{{item.name}}（
							<span>{{item.buyingThreshold}}</span>T起
							<span>{{item.discount}}</span>
							折)</span>
            <span class="computeOriginalPrice">
							单价：<span>{{item.computeOriginalPrice}}</span>
							USDT</span>
            <span class="totalPower">
							总算力：<span>{{item.power}}</span>
							T</span>
          </p>
          <div :id="'power' + item.id" style="height: 50px;"></div>
          <div class="costInfo">
            <div>
              <p>电费单价</p>
              <p>
                <span>{{item.electricityPrice}}</span>
                USDT/KW-H
              </p>
            </div>
            <div>
              <p>服务费</p>
              <p>
                <span>{{item.servicePrice}}</span>
                %
              </p>
            </div>
            <div>
              <p>合约到期</p>
              <p>
                <span>{{item.contractPeriod}}</span>
                天
              </p>
            </div>
            <div>
              <p>起售时间</p>
              <p>
                <span>{{item.saleStartTime}}</span>
              </p>
            </div>
            <div>
              <p>封装周期</p>
              <p>
                <span>{{item.startWorkDays}} 天</span>
              </p>
            </div>
            <div class="progressBtn">
              <a-button v-if="checkStatus(item.saleStartTime)" :disabled='true' class="buyBtn">待售</a-button>
              <a-button v-else-if="checkSaleStatus(item.saleEndTime)" class="overBtn" :disabled='true'>已停售</a-button>
              <a-button v-else-if="item.remainingPower > 0" @click="buyFilecoin(item.id)" class="buyBtn">立即购买</a-button>
              <a-button v-else :disabled='true' class="overBtn">已告罄
              </a-button>
            </div>
          </div>
          <div class="costInfo1">
            <div>
              <div>
                <p>电费单价</p>
                <p>
                  <span>{{item.electricityPrice}}</span>
                  USDT/KW-H
                </p>
              </div>
              <div>
                <p>服务费</p>
                <p>
                  <span>{{item.servicePrice}}</span>
                  %
                </p>
              </div>
              <div>
                <p>合约到期</p>
                <p>
                  <span>{{item.contractPeriod}}</span>
                  天
                </p>
              </div>
            </div>
            <div>
              <div>
                <p>起售时间</p>
                <p>
                  <span>{{item.saleStartTime}}</span>
                </p>
              </div>
              <div>
                <p>开挖时间</p>
                <p>
                  <span>{{item.workStartTime}}</span>
                </p>
              </div>
              <div class="progressBtn">
                <a-button v-if="checkStatus(item.saleStartTime)" :disabled='true' class="buyBtn">待售</a-button>
                <a-button v-else-if="checkSaleStatus(item.saleEndTime)" class="overBtn" :disabled='true'>已停售</a-button>
                <a-button v-else-if="item.remainingPower > 0" @click="buyFilecoin(item.id)" class="buyBtn">立即购买
                </a-button>
                <a-button v-else :disabled='true' class="overBtn" style="border:none;color:rgba(0,0,0,0.65)">已告罄
                </a-button>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div>
        <p class="contentTitle">
          Filecoin分配情况
        </p>
        <p class="totalNum">总量<span>20亿</span>，6年减半</p>
        <a-row class="bar-row">
          <a-col :span="6">
            <div id="bar"></div>
          </a-col>
          <a-col :span="18" style="margin-top: 40px">
            <div class="detailInfo">
              <div :class="className1">
                <p>矿工: 70%</p>
                <p>维持数据存储，维护区块链，分配数据，运行合约等，挖矿60年。</p>
              </div>
              <div :class="className2">
                <p>实验室: 15%</p>
                <p>用于研究，工程，开发，商业发展，市场营销，分销，6年线性释放。</p>
              </div>
              <div :class="className3">
                <p>投资者: 10%</p>
                <p>为网络发展，业务发展，合作伙伴，支持等提供资金，6、12、36年线性释放。</p>
              </div>
              <div :class="className4">
                <p>基金会: 5%</p>
                <p>为网络管理，合作伙伴关系，学术资助，社区建设等，6年线性释放。</p>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
      <div class="progress">
        <div id="progerss4"></div>
      </div>
      <div class="totalCount">
        <div>
          可挖数量：
          <span>{{filInfo.totalFil}} FIL</span>
        </div>
        <div>
          剩余待挖：
          <span>{{filInfo.totalFil - filInfo.currentFil}} FIL</span>
        </div>
      </div>
      <div class="flexLayout">
        <div>
          <p>{{filInfo.totalPower}} EiB</p>
          <p>全网总算力</p>
        </div>
        <div>
          <p>{{filInfo.avgBlocksReword}} FIL</p>
          <p>出区奖励</p>
        </div>
        <div>
          <p>${{filInfo.newlyPrice}}</p>
          <p>Filecion单价</p>
        </div>
        <div>
          <p>{{filInfo.avgBlockTime}} s</p>
          <p>平均出块时间</p>
        </div>
      </div>
      <div class="lineCharts">
        <a-row>
          <a-col :span="16">
            <div id="line"></div>
          </a-col>
          <a-col :span="8">
            <div class="pWrap">
              <p>
                <span>-算力类型：</span>
                <span style="color: #380CF4">Filecoin满存算力</span>
              </p>
              <p>
                <span>-结算时间：</span>
                <span>每日00:00后自动结算</span>
              </p>
              <p>
                <span>-最小结算单位：</span>
                <span>1FIL 起</span>
              </p>
            </div>
          </a-col>
        </a-row>
      </div>
      <div class="teSe">
        <p class="contentTitle" style="color: #fff">Star River矿池特色</p>
        <div class="features">
          <div>
            <img src="../assets/05.png" width="100" height="100" alt="">
            <p>技术先进</p>
            <p>矿池技术持续保持领先，矿机实测数据展示，挖矿收益数据实时透明</p>
          </div>
          <div>
            <img src="../assets/06.png" width="100" height="100" alt="">
            <p>便捷管理</p>
            <p>注册账号，矿池提供APP、谷歌验证码、邮件等方式帮助您管理、保护您的矿机和资产</p>
          </div>
          <div>
            <img src="../assets/07.png" width="100" height="100" alt="">
            <p>VIP解决方案</p>
            <p>采用领先的独创算法，规模运营，低耗高效，能为大规模挖矿提供服务</p>
          </div>
          <div>
            <img src="../assets/08.png" width="100" height="100" alt="">
            <p>稳定安全</p>
            <p>顶级技术团队，分布式架构并发挖矿，节点部署全球各地，7*24小时稳定安全的挖矿网络环境</p>
          </div>
        </div>
      </div>
      <div class="appDownload">
        <p class="contentTitle">Star River APP下载</p>

        <div style="margin-left: 60px;text-align: center">
          <div class="downBtn">
            <img src="../assets/ios.png">
            <span>ios下载</span>
          </div>
          <br>
          <div class="downBtn">
            <img src="../assets/android.png">
            <span>安卓下载</span>
          </div>
        </div>

      </div>
      <div class="joinXing">
        <p class="contentTitle">加入Star River</p>
        <div class="joinInfo">
          <div>
            <img src="../assets/15.png" width="140" height="140" alt="">
            <p>注册账号</p>
            <p>挖FIL币的矿工需要先注册星河鲸鱼（Star River）账户</p>
          </div>
          <div>
            <img src="../assets/16.png" width="140" height="140" alt="">
            <p>开始挖矿</p>
            <p>挖矿前需要先知道矿机和流程，这里做了教程详解</p>
          </div>
          <div>
            <img src="../assets/17.png" width="140" height="140" alt="">
            <p>坐享收益</p>
            <p>支付及时，每天自动分配和支付，挖矿收益数据实时透明</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import {
    basePng
  } from './basePng'
  import {
    getComputingPowerList,
    getFilInfo,
    powerchangeMonth,
    feechartDay,
    messageList,
    newBlockTipSet
  } from '../serves/index'
  import {
    eventBus
  } from '@/eventBus';
  import { setLocalStorage, getLocalStorage } from "../serves/localStorage";

  export default {
    data() {
      return {
        className1: 'hightColor',
        className2: '',
        className3: '',
        className4: '',
        flag: true,
        codeImg: '',
        picArr: [
          require("../assets/firstIcon.png"),
          require("../assets/secondIcon.png")
        ],
        computerPowerList: [],
        filInfo: {}
      }
    },
    mounted() {
      powerchangeMonth().then(res => {
        if (res.status == 200 && res.data.code == 200) {
          const xAxis = res.data.data.datetime
          const series = res.data.data.powers
          const unit = res.data.data.unit
          let data = {
            xAxis,
            series,
            unit
          }
          this.drawLine(data)
        }
      })
      // feechartDay().then(res => {
      //   console.log(res);
      // })
      // messageList().then(res => {
      //   console.log(res);
      // })
      // newBlockTipSet().then(res => {
      //   console.log(res);
      // })

      this.getFilInfoData()
      this.getPowerList()

      this.drawPie()
      // this.drawLine()

    },
    methods: {
      checkStatus(time) {
        return new Date(time).getTime() > new Date().getTime()
      },
      checkSaleStatus(time) {
        return new Date(time).getTime() < new Date().getTime()
      },
      getFilInfoData() {
        getFilInfo().then(res => {
          if (res.status == 200 && res.data.code == 200) {
            this.filInfo = res.data.data
            this.filInfo.totalPower = this.filInfo.totalPower.toFixed(3)
            this.filInfo.avgBlocksReword = this.filInfo.avgBlocksReword.toFixed(3)
            const data = ((this.filInfo.currentFil / this.filInfo.totalFil) * 100).toFixed(2)
            this.drawProgress('progerss4', data, 20, [50, 50])
          }
        })
      },
      getPowerList() {
        getComputingPowerList().then(res => {
          let progressCharts = []
          if (res.status == 200 && res.data.status.code == 200) {
            this.computerPowerList = res.data.data
            this.computerPowerList.forEach(el => {
              progressCharts.push({
                id: `power${el.id}`,
                data: (((el.power - el.remainingPower) / el.power) * 100).toFixed(
                  2)
              })
            })
            setTimeout(() => {
              progressCharts.forEach(item => {
                this.drawProgress(item.id, item.data, 10, [30, 30])
              })
            }, 1000)
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message)
            eventBus.$emit('isShow', false);
          } else {
            this.$message.warning(res.data.message)
          }
        })
      },

      buyFilecoin(id) {
        if (!getLocalStorage('accessToken')) {
          this.$message.warning('请先登录后再购买！')
          this.$router.push('login')
          return false
        }
        this.$router.push({
          path: '/goodsDetail',
          query: {
            id: id
          }
        })
        window.scrollTo(0, 0);
      },
      changeTable(val) {
        if (val == 'first') {
          this.flag = true
        } else {
          this.flag = false
        }
      },
      drawPie() {
        let myChart = echarts.init(document.getElementById('bar'));
        let option = {
          color: ['#41AFFD', '#F99A5A', '#1ED0B9', '#DD82EE', '#FE7689'],
          title: {
            text: `{a|}{b|总量：}\n{c|2,000,000,000.00FIL}`,
            left: 'center',
            bottom: 10,
            textStyle: {
              rich: {
                a: {
                  width: 20,
                  height: 20,
                  backgroundColor: {
                    image: require('../assets/1.png')
                  }
                },
                b: {
                  textAlign: 'left'
                },
                c: {
                  marginLeft: 20
                }
              }
            }

          },
          grid: {
            bottom: '5%',
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            show: false,
            left: 'center'
          },
          series: [{
            type: 'pie',
            radius: [20, 100],
            center: ['50%', '50%'],
            roseType: 'area',
            label: {
              show: false
            },
            data: [{
              value: 1048,
              name: '矿工'
            },
              {
                value: 735,
                name: '实验室'
              },
              {
                value: 580,
                name: '投资者'
              },
              {
                value: 484,
                name: '基金会'
              }
            ]
          }]
        }
        myChart.setOption(option, true);
        myChart.on("mouseover", (val) => {
          if (val.name == '矿工') {
            this.className1 = 'hightColor'
            this.className2 = ''
            this.className3 = ''
            this.className4 = ''
          } else if (val.name == '实验室') {
            this.className1 = ''
            this.className2 = 'hightColor'
            this.className3 = ''
            this.className4 = ''
          } else if (val.name == '投资者') {
            this.className1 = ''
            this.className2 = ''
            this.className3 = 'hightColor'
            this.className4 = ''
          } else {
            this.className1 = ''
            this.className2 = ''
            this.className3 = ''
            this.className4 = 'hightColor'
          }
        })
      },
      drawLine(data) {
        let myChart = echarts.init(document.getElementById('line'));
        let option = {
          color: ['#C060C2', '#FD51D9'],
          title: {
            show: false
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            textStyle: {
              fontSize: 12
            },
            data: [{
              name: 'FIL全网算力',
              icon: `image://${this.picArr[0]}`
            },
              {
                name: 'FIL价格走势',
                icon: `image://${this.picArr[1]}`
              }
            ]
          },
          toolbox: {
            show: false
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              textStyle: {
                color: '#000'
              },
              formatter(val) {
                return val.split(' ')[0]
              }
            },
            data: data.xAxis
          }],
          yAxis: [{
            type: 'value',
            name: data.unit,
            nameTextStyle: {
              color: '#000'
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#DCE2E8'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#000'
              }
            },
            splitLine: {
              show: true
            }
          },
            // {
            //   type: 'value',
            //   name: 'USDT/周',
            //   nameTextStyle: {
            //     color: '#000'
            //   },
            //   position: 'right',
            //   axisTick: {
            //     show: false
            //   },
            //   axisLabel: {
            //     textStyle: {
            //       color: '#000'
            //     },
            //     formatter: '{value}'
            //   },
            //   axisLine: {
            //     show: true,
            //     lineStyle: {
            //       color: '#DCE2E8'
            //     }
            //   },
            //   splitLine: {
            //     show: false
            //   }
            // }
          ],
          series: [{
            name: 'FIL全网算力',
            type: 'line',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(192, 96, 194, 1)'
              }, {
                offset: 1,
                color: 'rgba(90, 99, 251, 1)'
              }])
            },
            emphasis: {
              focus: 'series'
            },
            data: data.series
          },
            // {
            //   name: 'FIL价格走势',
            //   type: 'line',
            //   smooth: true,
            //   yAxisIndex: 1,
            //   lineStyle: {
            //     width: 0
            //   },
            //   showSymbol: false,
            //   label: {
            //     show: true,
            //     position: 'top'
            //   },
            //   areaStyle: {
            //     opacity: 0.8,
            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //       offset: 0,
            //       color: 'rgb(253,81,217)'
            //     }, {
            //       offset: 1,
            //       color: 'rgba(253, 81, 217, 0.17)'
            //     }])
            //   },
            //   emphasis: {
            //     focus: 'series'
            //   },
            //   data: [220, 302, 181, 234, 210, 290, 150]
            // }
          ]
        }
        myChart.setOption(option, true);
      },
      drawProgress(id, data, barWidth, symbolSize) {
        let myChart = echarts.init(document.getElementById(id));
        let option = {
          grid: {
            left: 10,
            right: 50
          },
          xAxis: {
            type: 'value',
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            max: 100,
          },
          yAxis: {
            type: 'category',
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
          },
          series: [{
            name: 'XXX',
            type: 'pictorialBar',
            symbol: basePng,
            symbolSize: symbolSize,
            symbolOffset: symbolSize[0] > 40 ? [25, 0] : [15, 0],
            z: 12,
            data: [{
              value: data,
              symbolPosition: 'end'
            }]
          },
            {
              type: 'bar',
              itemStyle: {
                normal: {
                  color: '#4117F4',
                  opacity: symbolSize[0] > 40 ? 1 : .7,
                  barBorderRadius: 20,
                }
              },
              label: {
                normal: {
                  show: true,
                  position: "right",
                  distance: 20,
                  textStyle: {
                    color: "#4117F4",
                    fontSize: 18,
                    fontWeight: 700
                  },
                  formatter: (val) => {
                    return `${val.data}%`
                  }
                }
              },
              showBackground: true,
              silent: true,
              barWidth: barWidth,
              barGap: '-100%',
              data: [data]
            }
          ]
        };
        myChart.setOption(option, true);
      },
      rowKey(record, index) {
        return index
      }
    }


  }
</script>

<style lang="scss">
  .shouye {
    .banner {
      width: 100%;
      height: auto;
    }

    .content {
      padding: 10px;
      margin: 0px 200px;
      text-align: left;
      min-height: 700px;

      .totalNum {
        font-size: 20px;
        text-align: center;
        margin-bottom: 30px;

        span {
          margin-left: 5px;
          font-weight: 700;
        }
      }

      #bar {
        height: 300px;
      }

      .detailInfo {
        font-size: 16px;
        display: flex;
        justify-content: space-around;

        div {
          color: #ccc;
          margin: 10px;
          padding: 0px 10px;
          box-shadow: 0px 5px 20px 0px rgba(56, 12, 244, 0.08);
        }

        .hightColor {
          color: #fff;
          background-color: #380CF4;
          margin: -10px 0px;
          transition: .3s
        }

        p {
          font-weight: 700;
          line-height: 2;
        }
      }

      .totalCount {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        font-size: 16px;
        padding-bottom: 20px;

        span {
          font-size: 24px;
          font-weight: 700;
          color: #380CF4;
        }

      }

      .progress {
        margin-top: 30px;
        padding: 20px 0px;

        #progerss4 {
          height: 100px;
        }
      }

      .flexLayout {
        margin-top: 30px;
        display: flex;
        justify-content: space-around;
        padding: 20px;
        box-shadow: 0px 5px 20px 0px rgba(56, 12, 244, 0.08);

        div {
          text-align: center;

          p {
            margin-bottom: 10px;
          }

          p:nth-child(1) {
            font-size: 24px;
            color: #380CF4;
          }

          p:nth-child(2) {
            font-size: 14px;
          }
        }
      }

      .lineCharts {
        margin-top: 30px;
        box-shadow: 0px 5px 20px 0px rgba(56, 12, 244, 0.08);
        padding: 30px 0px;

        #line {
          height: 350px;
        }
      }

      .progressWrap {
        cursor: pointer;
        padding: 0px;

        > div {
          padding: 50px;
          margin-bottom: 20px;
          box-shadow: 0px 5px 20px 0px rgba(56, 12, 244, 0.08);

          .progressBtn {
            .ant-btn {
              border-radius: 20px;
              color: #fff;
              border: none;
            }

            .buyBtn {
              background-color: #380CF4;
            }

            .overBtn {
              background: #ccc;
              color: rgba(0, 0, 0, 0.6);
            }


            position: relative;
            top: 18px;
          }

          .progressHeader {
            > span:nth-child(1) {
              padding: 10px;
              font-size: 16px;
              font-weight: 700;
              background: #EBE6FD;
              border-radius: 30px;
              margin-right: 10px;
              color: #380CF4;
            }

            span:nth-child(2),
            span:nth-child(3) {
              font-size: 16px;
              font-weight: 700;
              padding: 10px;
            }

            .totalPower,
            .computeOriginalPrice {
              float: right;

              span {
                font-size: 18px;
                font-weight: 700;
                color: #FB3353
              }
            }

            .totalPower {
              margin-right: 100px;
            }
          }
        }

        > div:hover {
          box-shadow: 0px 5px 20px 0px rgba(56, 12, 244, 0.08);
          background-color: #F5F3FE;
          padding: 50px 20px;

          .progressHeader {
            > span:nth-child(1) {
              background: #DFEDF8;
              color: #1ABEC9;
            }
          }
        }

        .costInfo {
          display: flex;
          justify-content: space-between;
          align-items: baseline;

          p {
            span {
              font-size: 18px;
              font-weight: 700;
            }
          }
        }

        .costInfo1 {
          display: none;
        }

      }

      .pWrap {
        padding: 20px;

        p {
          font-size: 20px;
          font-weight: 700;
          color: #1d1d1f;
          padding: 20px 0px;
        }
      }

      .contentTitle {
        font-size: 40px;
        font-weight: 700;
        color: #1d1d1f;
        text-align: center;
        padding: 50px;
        margin-bottom: 0px;
      }

      .tableList {
        .btnWrap {
          .ant-btn {
            font-size: 18px;
            font-weight: 700;
            border-radius: 40px;
            border: none;
          }

          .bgcBtn {
            background-color: #593ff0;
            color: #fff;
          }

          .ant-btn:hover,
          .ant-btn:focus {
            color: #000
          }

          .ant-btn:active,
          .ant-btn:focus {
            color: #fff
          }
        }

        .ant-table-thead {
          tr {
            font-size: 20px;
          }
        }

        .ant-table-tbody {
          tr {
            font-size: 18px;
          }

          tr:nth-child(even) {
            background-color: #f1f2f1;
          }
        }

      }


      .teSe {
        margin: 0px -200px;
        padding: 0px 300px;
        background-color: #000;

        .features {
          display: flex;
          justify-content: space-around;

          div {
            padding: 10px;
            text-align: center;
            width: 25%;

            p:nth-child(2) {
              font-size: 22px;
              font-weight: 400;
              color: #fff;
              padding: 30px 0px 10px;
              margin-bottom: 0px;
            }

            p:nth-child(3) {
              font-size: 16px;
              font-weight: 700;
              color: #fff;
              padding: 25px;
            }
          }
        }
      }

      .appDownload {
        .downBtn {
          padding: 10px;
          background-color: #1ebfca;
          border-radius: 4px;
          font-size: 20px;
          font-weight: 500;
          color: #fff;
          width: 170px;
        }

      }

      .joinXing {
        .joinInfo {
          display: flex;
          justify-content: space-around;

          div {
            padding: 50px 20px;
            text-align: center;
            margin: 20px;
            box-shadow: 0px 5px 20px 0px rgba(56, 12, 244, 0.08);

            p:nth-child(2) {
              font-size: 22px;
              font-weight: 400;
              color: #380CF4;
              padding: 30px 0px 10px;
            }

            p:nth-child(3) {
              font-size: 16px;
              font-weight: 700;
              color: #1d1d1f;
              padding: 25px;
            }

            span {
              border: 1px solid #000;
              font-size: 18px;
              font-weight: 500;
              border-radius: 25px;
              padding: 10px 50px;
              margin: 0px;
            }

            span:hover {
              color: #fff;
              background-color: #000;
            }
          }
        }

      }
    }
  }

  @media screen and (max-width: 800px) {
    .shouye {
      .banner {
        height: auto;
      }

      .content {
        margin: 10px;
        text-align: left;

        .totalNum {
          font-size: 16px;
          text-align: center;
          margin-bottom: 20px;
        }

        .bar-row {
          .ant-col-6 {
            width: 100%;
          }

          .ant-col-18 {
            width: 100%;
          }
        }

        #bar {
          height: 250px;
        }

        .detailInfo {
          font-size: 12px;
          display: flex;
          justify-content: space-around;

          div {
            margin: 2px;
            padding: 5px;
          }

          .hightColor {
            margin: 0px;
            transition: .3s
          }

          p {
            font-weight: 700;
            line-height: 1;
          }
        }

        .totalCount {
          font-size: 12px;
          padding-bottom: 10px;

          span {
            font-size: 14px;
          }
        }

        .progress {
          margin-top: 0px;
          padding: 5px 0px;

          #progerss4 {
            height: 50px;
          }
        }

        .flexLayout {
          margin-top: 10px;
          padding: 10px;

          div {
            p {
              margin-bottom: 10px;
            }

            p:nth-child(1) {
              font-size: 14px;
            }

            p:nth-child(2) {
              font-size: 12px;
            }
          }
        }

        .lineCharts {
          margin-top: 10px;
          padding: 0px;

          .ant-col-12 {
            width: 100%;
          }

          #line {
            height: 250px;
          }
        }

        .progressWrap {

          > div {
            padding: 5px;
            margin-bottom: 20px;

            .progressBtn {
              .ant-btn {
                font-size: 12px;
              }

              .buyBtn {
                background-color: #380CF4;
              }

              .overBtn {
                color: rgba(0, 0, 0, 0.85);
              }
            }

            .progressHeader {
              padding-top: 10px;

              > span:nth-child(1) {
                padding: 0px;
                font-size: 12px;
                margin-right: 5px;
              }

              span:nth-child(2),
              span:nth-child(3) {
                font-size: 12px;
                padding: 5px;
              }

              .computeOriginalPrice,
              .totalPower {
                font-size: 12px;

                span {
                  font-size: 12px;
                }
              }
            }
          }

          > div:hover {
            padding: 10px;
          }

          .costInfo {
            display: none;
            font-size: 12px;

            p {
              span {
                font-size: 12px;
                font-weight: 700;
              }
            }
          }

          .costInfo1 {
            display: block;
            font-size: 12px;

            p {
              span {
                font-size: 12px;
                font-weight: 700;
              }
            }

            > div {
              display: flex;
              justify-content: space-between;
              align-items: baseline;
            }
          }

        }

        .pWrap {
          padding: 20px 5px;

          p {
            font-size: 12px;
            padding: 5px;
          }
        }

        .contentTitle {
          font-size: 20px;
          font-weight: 700;
          padding: 15px;
        }

        .tableList {
          .btnWrap {
            .ant-btn {
              font-size: 12px;
            }
          }

          .ant-table-thead {
            tr {
              font-size: 12px;
            }

            th {
              padding: 0px;
            }
          }

          .ant-table-tbody {
            tr {
              font-size: 12px;
            }

            td {
              padding: 0px;
            }
          }
        }


        .teSe {
          display: none;
        }

        .appDownload {
          display: none;
        }

        .joinXing {
          display: none;
        }
      }
    }

  }
</style>
